<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>水位图</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
    <style>
        #main {
            width: 800px;
            height: 400px;
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        // 模拟数据 - 每个柱子的高度百分比
        var data = [20, 35, 75, 25, 45, 60, 65];

        var option = {
            backgroundColor: '#031d33',
            grid: {
                left: '5%',
                right: '5%',
                bottom: '15%',
                top: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['1', '2', '3', '4', '5'],
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#65D5FF',
                    fontSize: 14,
                    interval: 0
                }
            },
            yAxis: {
                type: 'value',
                max: 100,
                // show: false,
                inverse: true,  // 添加这行实现Y轴倒置
            },
            series: [
                {//背景柱
                    name: 'back',
                    data: [100, 100, 100, 100, 100],
                    type: "pictorialBar",
                    emphasis: {
                        focus: "series",
                    },
                    tooltip: {
                        show: false
                    },
                    barWidth: '30%',
                    silent: true,//务必同时设置静默属性，以使背景柱不响应任何操作
                    itemStyle: {
                        color: 'rgba(56,73,184,0.4)',
                        borderWidth: 1,
                        borderColor: "#428bff",
                    },
                    symbol: 'rect'
                },
                {
                    name: '达到发放的',
                    type: 'pictorialBar',
                    label: {
                        show: false,
                        position: 'right',
                        offset: [10, 0],
                        fontSize: 16
                    },
                    symbolRepeat: true,
                    symbolSize: ['80%', '35%'],
                    barCategoryGap: '40%',
                    barWidth: '30%',
                    itemStyle: {
                        color: 'rgb(35,173,253)',
                    },
                    data: [21, 43, 56, 32, 64],
                    symbol: 'rect'
                }
            ]
        };

        myChart.setOption(option);

        // 自适应窗口大小
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    </script>
</body>

</html>